<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-22 18:50:41
-->
<template>
<!-- 2.创建图表容器 容纳图表 -->
  <div>
      <div ref='root' style="height:150px"></div>
      <!-- <div ref='root2' style="height:150px"></div> -->
  </div>
</template>
<script>
import {Gauge} from '@antv/g2plot'
// 1.引入组件库
export default {
  data(){
    return{
      percent:0,
      // percent2:0
    }
  },
  mounted(){
    this.initCharts()
    // this.initCharts2()
  },
  methods:{
    // initCharts2(){
    //   const ticks = [0, 1 / 3, 2 / 3, 1];
    //   const color = ['#F4664A', '#FAAD14', '#30BF78'];
    //   //3.创建一个仪表盘实例对象
    //   let gauge =new Gauge(this.$refs['root'],{
    //     percent2: this.percent2,
    //     range: {
    //       ticks: [0, 1],
    //       color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
    //     },
    //     indicator: {
    //       pointer: {
    //         style: {
    //           stroke: '#D0D0D0',
    //         },
    //       },
    //       pin: {
    //         style: {
    //           stroke: '#D0D0D0',
    //         },
    //       },
    //     },
    //     statistic: {
    //       title: {
    //         formatter: ({ percent2 }) => {
    //           if (percent2 < ticks[1]) {
    //             return '差';
    //           }
    //           if (percent2 < ticks[2]) {
    //             return '中';
    //           }
    //           return '优';
    //         },
    //         style: ({ percent2 }) => {
    //           return {
    //             fontSize: '36px',
    //             lineHeight: 1,
    //             color: percent2 < ticks[1] ? color[0] : percent2 < ticks[2] ? color[1] : color[2],
    //           };
    //         },
    //       },
    //       content: {
    //         offsetY: 36,
    //         style: {
    //           fontSize: '24px',
    //           color: '#4B535E',
    //         },
    //         formatter: () => '系统表现',
    //       },
    //     },
    //   })
    //   //4.渲染
    //   gauge.render();
    //   // 调用
    //   setInterval(()=>{
    //     if(this.percent2<0.4){
    //       this.percent2 += 0.01;
    //       gauge.changeData(this.percent2);
    //     }else{
    //       this.percent2 = 0.4;
    //     }
    //   },10)
    // },

    initCharts(){
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ['#F4664A', '#FAAD14', '#30BF78'];
      //3.创建一个仪表盘实例对象
      let gauge =new Gauge(this.$refs['root'],{
        percent: this.percent,
        range: {
          ticks: [0, 1],
          color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return '差';
              }
              if (percent < ticks[2]) {
                return '中';
              }
              return '优';
            },
            style: ({ percent }) => {
              return {
                fontSize: '36px',
                lineHeight: 1,
                color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
              };
            },
          },
          content: {
            offsetY: 36,
            style: {
              fontSize: '24px',
              color: '#4B535E',
            },
            formatter: () => '系统表现',
          },
        },
      })
      //4.渲染
      gauge.render();
      // 调用间歇调用
      setInterval(()=>{
        if(this.percent<0.75){
          this.percent += 0.01;
          gauge.changeData(this.percent);
        }else{
          this.percent = 0.75;
        }
      },10)
    }

  }
}
</script>